<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>陈宗豪，了解一下？</title>
</head>
<body>
<div class="container">
    <div class="head">
        <div class="selfpic"></div>
        <div class="selfinfo_group">
            <div class="selfinfo_item">姓名：陈宗豪</div>
            <div class="selfinfo_item">生日：1997-03-14</div>
            <div class="selfinfo_item">手机：18742020281</div>
            <div class="selfinfo_item">邮箱：chzh314@hotmail.com</div>
            <div class="selfinfo_item">主页：<a href="http://14ch.cn">14ch.cn</a></div>
        </div>
        <div class="selfinfo_box"></div>
    </div>
    <!--<div class="split point"></div>-->
    <div class="cover jobcover">
        <div class="teachtitle point">
            <span class="beforetitle"></span>
            <span>应聘岗位</span>
        </div>
        <div class="title title1">
            <p>前端开发工程师（实习）</p>
        </div>
    </div>
    <div class="cover teachcover">
        <div class="teachtitle point">
            <span class="beforetitle"></span>
            <span>教育经历</span>
        </div>
        <div class="title title1">
            <div class="line">
                <div class="line_point"></div>
                <div class="line_point2"></div>
                <div class="line_point3"></div>
                <div class="line_point4"></div>
                <div class="line_point5"></div>
            </div>

            <p>学校：大连理工大学</p>
            <p>专业：软件工程(日语强化) — 大数据开发</p>
            <p>年级：本科三年级</p>
            <p>时间：2015.09~2019.6</p>
            <p>实验室：大连理工大学日语研究所</p>
        </div>
    </div>
    <div class="cover expresscover">
        <div class="teachtitle point">
            <span class="beforetitle"></span>
            <span>项目经历</span>
        </div>
        <div class="title title1">
            <div class="line">
                <div class="line_point"></div>
                <div class="line_point2"></div>
            </div>
            <span class="date">2017-12 至今</span>
            <p>
                <span>日本语视频语料库（重置）项目</span>
                <span class="subtitle">前端负责人/实验室负责人</span>
            </p>
            <p class="menu">日本语视频语料库是集日语短句在线分词+对应词法结构语料库检索+视频流点播的日语学习者综合平台，但由于开发时间久远难以维护，现作为实验室重点项目重新开发，使用VueJs+NodeJs+Spring</p>
        </div>
        <div class="title title2">
            <div class="line">
                <div class="line_point"></div>
                <div class="line_point2"></div>
            </div>
            <span class="date">2017-10 至今</span>
            <p>
                <span>基于OpenMRS的闭源医疗系统</span>
                <span class="subtitle">前端负责人/队长</span>
            </p>
            <p class="menu">承接自北京某医疗相关企业的项目，系统主要面向医护人员，能够录入病人信息，管理病人医疗档案并能通过机器学习算法建模分析提前预警病人情况，前端由VueJs+ElementUI完成。在项目中负责前端的分配统合，部分逻辑实现以及全部的UI、美工</p>
        </div>
        <div class="title title3">
            <div class="line">
                <div class="line_point"></div>
                <div class="line_point2"></div>
            </div>
            <span class="date">2017-06 - 2017-07</span>
            <p>
                <span>基于J2EE的分布式云存储系统</span>
                <span class="subtitle">负责人/队长</span>
            </p>
            <p class="menu">大二小学期大作业，使用Java(Struts2框架)完成后端，实现多服务器节点文件存储、分享、同步服务，兄弟服务器节点间实时同步文件。前端由Js+Jquery+Bootstrap完成，美观易用。在项目中负责大部分代码及全部美工任务</p>
        </div>
        <div class="title title4">
            <div class="line">
                <div class="line_point"></div>
                <div class="line_point2"></div>
            </div>
            <span class="date">2016-12 至今</span>
            <p>
                <span>日语作文辅助&审阅系统 - 校级创新项目</span>
                <span class="subtitle">负责人/队长</span>
            </p>
            <p class="menu">一个Web前端项目，可用于辅助日语学习者探索日与写作。由使用者在页面编辑器中书写文章内容，系统分词后在云端语料库中检索相关联信息和建议实时反馈给使用者。使用Vue完成。目前处在项目一期，全部任务独立完成</p>
        </div>
        <div class="title title5">
            <div class="line">
                <div class="line_point"></div>
                <div class="line_point2"></div>
            </div>
            <span class="date">2016-06 - 2016-07</span>
            <p>
                <span>基于OpenGL的3D中国象棋游戏</span>
                <span class="subtitle">负责人/队长</span>
            </p>
            <p class="menu">大一小学期大作业。使用C++标准库及OpenGL接口独立设计出简易3D游戏引擎并搭建游戏环境，项目中负责绝大多数代码及全部设计工作。由于效果惊艳流畅，获得老师认可并被用于日后教学展示中</p>
        </div>
        <div class="title title6">
            <div class="line">
                <div class="line_point"></div>
                <div class="line_point2"></div>
            </div>
            <span class="date">2016-04 - 2016-04</span>
            <p>
                <span>日语记单词（随堂听写）</span>
                <span class="subtitle">独立完成</span>
            </p>
            <p class="menu">基于Adobe Air+As3.0的课堂教学软件。用于日语随堂听写，项目需求由老师提出。由于操作简便，美观实用，极大提升课堂效率而得到老师赏识被邀入实验室</p>
        </div>
    </div>
    <div class="cover skillcover">
        <div class="teachtitle point">
            <span class="beforetitle"></span>
            <span>技能水平</span>
        </div>
        <div class="title title1">
            <div class="line">
                <div class="line_point"></div>
                <div class="line_point2"></div>
                <div class="line_point3"></div>
                <div class="line_point4"></div>
                <div class="line_point5"></div>
            </div>
            <p>HTML5 - 熟练</p>
            <p>CSS3 - 熟练</p>
            <p>JavaScript - 熟练</p>
            <p>Flash(Animation) - 熟练</p>
            <p>Photoshop - 熟练</p>
            <p>MySQL - 熟练</p>
        </div>

    </div>
    <div class="cover langcover">
        <div class="teachtitle point">
            <span class="beforetitle"></span>
            <span>语言水平</span>
        </div>
        <div class="title title1">
            <p>日语：商务沟通</p>
            <p>英语：日常会话</p>
        </div>

    </div>
    <div class="design">
        Page Designed By 陈宗豪
    </div>
</div>
<div class="space"></div>
</body>
<script></script>
<style>
    html,body{
        margin: 0;
        background: #e6f0fa;
        font-family:'微软雅黑 Light','微软雅黑','黑体';
        /*height:2300px;*/
    }
    p{
        margin:0;
        margin-bottom:0.8em;
    }
    .space{
        position: absolute;
        top:2220px;
        width: 1px;
        height: 100px;

    }
    .design{
        position: absolute;
        right:0;
        bottom:0;
        color:#969896;
        font-size: 12px;
    }
    .container{
        z-index: -1;
        width: 800px;
        position: absolute;
        left:calc(50% - 400px);
        top:20px;
        height:2200px;
        /*margin-bottom:100px;*/
        background: #fff;
        box-shadow: 0 1px 5px #c0c0c0;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        overflow: hidden;
    }
    .head{
        position: absolute;
        width: 100%;
    }
    .selfpic{
        position: absolute;
        left:80px;
        top:40px;
        width:160px;
        height: 160px;
        border-radius: 50%;
        border:5px solid #cde9fa;
        background-image:url('');
        background-repeat:no-repeat;
        background-size:auto 100%;
        line-height:150px;
        text-align: center;
        z-index: 1;

    }
    .selfinfo_group{
        z-index: -1;
        position: absolute;
        width:490px;
        left:210px;
        top:30px;
        -webkit-border-radius: 0 100px 100px 0;
        -moz-border-radius: 0 100px 100px 0;
        border-radius: 0 100px 100px 0;
        overflow: hidden;
        background: #f2f8ff;
    }
    .selfinfo_item{
        position: relative;
        margin:10px;
        background: #fff;
        border-bottom:1px solid #cde9fa;
        /*text-align: center;*/
        padding-left:100px;
        line-height:25px;
        width:400px;
        height:25px;
    }
    .selfinfo_box{
        position: absolute;
        left:80px;
        top:25px;
        width:200px;
        height:200px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background: #fff;
        border-right:2px solid #96edfa;
        /*border:130px solid transparent;*/
        /*border-right-width:100px;*/
        /*border-right-color: #000;*/
    }
    .cover{
        position: absolute;
        width: 100%;
    }
    .jobcover{
        top:260px;
    }
    .teachcover{
        top:380px;
    }
    .expresscover{
        top:680px;
    }
    .skillcover{
        top:1520px;
    }
    .langcover{
        top:1820px;
    }
    .teachtitle{
        position: absolute;
        top:20px;
        left:60px;
        width:calc(100% - 120px);
        height:2em;
        /*border-bottom:1px solid #eee;*/
    }
    .beforetitle{
        width: 0;
        height: 0;
        border:4px solid #96edfa;
        margin-right:10px;
    }
    .title{
        position: absolute;
        width:560px;
        font-size:14px;
        left:120px;
    }
    .title1{
        top:90px;
    }
    .title2{
        top:200px;
    }.title3{
        top:310px;
    }
     .title4{
         top:420px;
     }
     .title5{
         top:530px;
     }
     .title6{
         top:640px;
     }
    .subtitle{
        margin-left:20px;
        color: #949494;
    }
    .date{
        position: absolute;
        right:0;
        color: #949494;
    }
    .split {
        position:absolute;
        top:230px;
        width:90%;
        height: 2px;
        left:5%;

    }
    .menu{
        margin-top:5px;
        font-size:13px;
        color: #323232;
    }
    .line{
        position: absolute;
        left:-20px;
        top:0px;
        width: 0;
        height: 0px;
        border:100px solid #eee;
        border-left-width:1px;
        border-right-width:1px;
    }
    .line_point{
        position: absolute;
        left:-8px;
        top:-100px;
        width:9px;
        height:9px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background: #fff;
        border:4px solid #96edfa;
    }
    .line_point2{
        position: absolute;
        left:-4px;
        top:-65px;
        width:9px;
        height:9px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background: rgba(150, 237, 250, 0.86);
    }.line_point3{
        position: absolute;
        left:-4px;
        top:-35px;
        width:9px;
        height:9px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background: rgba(150, 237, 250, 0.65);
    }.line_point4{
        position: absolute;
        left:-4px;
        top:-5px;
        width:9px;
        height:9px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background: rgba(150, 237, 250, 0.41);
    }.line_point5{
        position: absolute;
        left:-4px;
        top:25px;
        width:9px;
        height:9px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background: rgba(150, 237, 250, 0.16);
    }
    .point{
        background-image:url();
        background-repeat:repeat-x;
        background-position:left bottom;
    }
</style>
</html>